<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https:d3js.org/d3.v3.min.js"></script>
</head>
<style>
                .node circle{
                    fill:#fff;
                    stroke:steelblue;
                    stroke-width: 1.5px;
                }
                .node{
                    font: 12px sans-serif;
                }
                .link{
                    fill:none;
                    stroke:#ccc;
                    stroke-width: 1.5px;
                }
            </style>
<body>
  <script>
    var  width = 500
    var height = 500
    // 定义数据转换函数
    var tree = d3.layout.tree()
      .size([width,height-300])
    //定义对角生成器diagonal
    var diagonal = d3.svg.diagonal()
        .projection(function(d){return [d.y,d.x]})
    
    var svg = d3.select('body')
        .append('svg')
        .attr('width',width)
        .attr('height',height)
        .append('g')
        .attr("transform","translate(40,0)")
        

    //读取json文件，进行绘图
    d3.json('ss.json',function(erro,root){
        var nodes = tree.nodes(root);
        var links = tree.links(nodes);
         
        //画点
        var node = svg.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class","node")
        .attr("transform",function(d){return "translate("+ d.y+","+ d.x+")"})

        //加圆圈
        node.append('circle')
          .attr('r',4.5)
        
        //加文字
        node.append('text')
          .attr('dx',function(d){return d.children?-8:8})
          .attr('dy',3)
          .style('text-anchor',function(d){return d.children?'end':'start'})
          .text(function(d){return d.name})

        //画线 
        var line = svg.selectAll('link')
        .data(links)
        .enter()
        .append('path')
        .attr('class','link')
        .attr('d',diagonal)
    })

  </script>
</body>

</html>